@charset "utf-8";
@import "reset";
body {
  background: #f1f3f4;
}
.warp {
  width: 100vw;
  height: 266.1333vw;
  margin: 0 auto;
  background-color: #eaebef;
  // 页面标题
  .title {
    width: 100vw;
    height: 11.2vw;
    opacity: 1;
    background: #ffffffff;
    text-align: center;
    line-height: 11.2vw;
  }
  .first-block {
    width: 94.6667vw;
    height: 54.9333vw;
    border-radius: 1.3333vw;
    opacity: 1;
    background: #ffffffff;
    margin: 0 auto;
    margin-top: 2.6667vw;
    // 收货信息
    .information {
      width: 89.3333vw;
      height: 9.6vw;
      margin: 0 auto;
      opacity: 1;
      padding-top: 2.6667vw;
      border-bottom: .2667vw solid #f7f9faff;
      display: flex;
      justify-content: space-between;
      .left {
        width: 16vw;
        height: 5.6vw;
        opacity: 1;
        color: #000000ff;
        font-size: 4vw;
      }
      .right {
        width: 26.1333vw;
        height: 5.3333vw;
        opacity: 1;
        color: #000000ff;
        font-size: 3.7333vw;
        margin-right: 5.28vw;
      }
    }
    //送达日期
    .data {
      width: 89.3333vw;
      height: 13.6vw;
      margin: 0 auto;
      opacity: 1;
      border-bottom: .2667vw solid #f7f9faff;
      display: flex;
      justify-content: space-between;
      .left {
        width: 16vw;
        height: 5.6vw;
        opacity: 1;
        color: #000000ff;
        font-size: 4vw;
        line-height: 5.6vw;
        margin-top: 4vw;
      }
      .right {
        width: 26.1333vw;
        height: 5.3333vw;
        opacity: 1;
        color: #000000ff;
        font-size: 3.7333vw;
        line-height: 5.6vw;
        margin-top: 4vw;
        margin-right: 5.28vw;
      }
    }
    // 送达时间
    .time {
      width: 89.3333vw;
      height: 13.6vw;
      margin: 0 auto;
      opacity: 1;
      border-bottom: .2667vw solid #f7f9faff;
      display: flex;
      justify-content: space-between;
      .left {
        width: 16vw;
        height: 5.6vw;
        opacity: 1;
        color: #000000ff;
        font-size: 4vw;
        line-height: 5.6vw;
        margin-top: 4vw;
      }
      .right {
        width: 14.9333vw;
        height: 5.3333vw;
        opacity: 1;
        color: #000000ff;
        font-size: 3.7333vw;
        line-height: 5.6vw;
        margin-top: 4vw;
        margin-right: 5.28vw;
      }
    }
    // 配送方式
    .manner {
      width: 89.3333vw;
      height: 13.6vw;
      margin: 0 auto;
      opacity: 1;
      border-bottom: .2667vw solid #f7f9faff;
      display: flex;
      justify-content: space-between;
      .left {
        width: 16vw;
        height: 5.6vw;
        opacity: 1;
        color: #000000ff;
        font-size: 4vw;
        line-height: 5.6vw;
        margin-top: 4vw;
      }
      .right {
        width: 22.4vw;
        height: 5.3333vw;
        opacity: 1;
        color: #000000ff;
        font-size: 3.7333vw;
        line-height: 5.6vw;
        margin-top: 4vw;
        margin-right: 5.28vw;
      }
    }
    .icon {
      width: 94.6667vw;
      height: .8vw;
      display: flex;
      justify-content: space-between;
      .item {
        width: 4vw;
        height: .8vw;
        background-color: #ff9a7e;
      }
      .item1 {
        width: 4vw;
        height: .8vw;
        background-color: #b4babf;
      }
    }
  }
  .second-block {
    width: 94.6667vw;
    height: 85.0667vw;
    margin: 0 auto;
    // 订购人信息
    .mess {
      width: 94.6667vw;
      height: 10.9333vw;
      display: flex;
      background-color: white;
      margin-top: 2.6667vw;
      border-radius: 1.3333vw;
      .left {
        width: 20vw;
        height: 5.6vw;
        line-height: 5.6vw;
        margin-top: 2.6667vw;
        color: #000000ff;
        font-size: 4vw;
        margin-left: 2.6667vw;
      }
      .right {
        width: 11.2vw;
        height: 5.3333vw;
        line-height: 5.3333vw;
        margin-top: 2.6667vw;
        color: #000000ff;
        font-size: 3.7333vw;
        margin-left: 52.8533vw;
      }
    }
    .message {
      width: 94.6667vw;
      height: 68.8vw;
      border-radius: 1.3333vw;
      margin-top: 2.6667vw;
      background-color: white;
    }
    // 贺卡留言
    .greeting-card {
      width: 16vw;
      height: 5.6vw;
      line-height: 5.6vw;
      color: #000000ff;
      font-size: 4vw;
      padding-top: 2.6667vw;
      margin-left: 2.6667vw;
    }
    .gree-write {
      width: 89.3333vw;
      height: 21.3333vw;
      opacity: 1;
      border: .2667vw solid #767676ff;
      margin-top: 2.6667vw;
      margin-left: 2.6667vw;
      .detail {
        width: 86.72vw;
        height: 4.5333vw;
        line-height: 4.5333vw;
        color: #757575ff;
        font-size: 3.2vw;
        margin-top: 1.3333vw;
        margin-left: 1.3333vw;
      }
    }
    // 买家留言
    .buyers {
      width: 16vw;
      height: 5.6vw;
      line-height: 5.6vw;
      color: #000000ff;
      font-size: 4vw;
      margin-top: 3.4667vw;
      margin-left: 2.6667vw;
    }
    .buyers-write {
      width: 89.3333vw;
      height: 21.3333vw;
      opacity: 1;
      border: .2667vw solid #767676ff;
      margin-left: 2.6667vw;
      margin-top: 2.6667vw;
      .detail {
        width: 86.72vw;
        height: 4.5333vw;
        line-height: 4.5333vw;
        color: #757575ff;
        font-size: 3.2vw;
        margin-top: 1.3333vw;
        margin-left: 1.3333vw;
      }
    }
  }
  // 商品
  .third-block {
    width: 94.6667vw;
    height: 30.9333vw;
    border-radius: 1.3333vw;
    margin: 0 auto;
    background: #ffffffff;
    .content {
      width: 89.3333vw;
      height: 25.3333vw;
      display: flex;
      padding-top: 2.6667vw;
      margin-left: 2.6667vw;
      border-bottom: .2667vw solid #f7f9faff;
      .photo {
        width: 17.3333vw;
        height: 17.3333vw;
        margin-top: 4vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        width: 14.9333vw;
        height: 17.3333vw;
        margin-top: 4vw;
        .top {
          width: 14.9333vw;
          height: 5.3333vw;
          color: #000000ff;
          font-size: 3.7333vw;
        }
        .bottom {
          width: 5.0667vw;
          height: 4.5333vw;
          color: #000000ff;
          font-size: 3.7333vw;
        }
      }
      .price {
        width: 10.1333vw;
        height: 5.3333vw;
        line-height: 5.3333vw;
        font-weight: bold;
        color: #000000ff;
        font-size: 3.7333vw;
        margin-top: 9.7333vw;
        margin-left: 44.4373vw;
      }
    }
  }
  // 支付方式
  .fourth-block {
    width: 94.6667vw;
    height: 27.8347vw;
    border-radius: 1.3333vw;
    margin: 0 auto;
    margin-top: 2.6667vw;
    background: #ffffffff;
    .pay {
      width: 14.9333vw;
      height: 5.3333vw;
      line-height: 5.3333vw;
      color: #000000ff;
      font-size: 3.7333vw;
      padding-top: 2.6667vw;
      margin-left: 2.6667vw;
    }
    .wx {
      width: 89.3333vw;
      height: 7.8347vw;
      border-top: .2667vw solid #f7f9faff;
      display: flex;
      align-items: center;
      margin-left: 2.6667vw;
      .photo {
        width: 5.3333vw;
        height: 5.3333vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .write {
        width: 10.6373vw;
        height: 4.2667vw;
        color: #000000ff;
        font-size: 3.7333vw;
      }
    }
    .zfb {
      width: 89.3333vw;
      height: 7.7333vw;
      border-top: .2667vw solid #f7f9faff;
      display: flex;
      align-items: center;
      margin-left: 2.6667vw;
      .photo {
        width: 5.3333vw;
        height: 5.3333vw;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .write {
        width: 11.4667vw;
        height: 4.2667vw;
        color: #000000ff;
        font-size: 3.7333vw;
      }
    }
  }
  .fifth-block {
    width: 94.6667vw;
    height: 10.9333vw;
    border-radius: 1.3333vw;
    margin: 0 auto;
    margin-top: 2.6667vw;
    background: #ffffffff;
    display: flex;
    .left {
      width: 8vw;
      height: 5.6vw;
      line-height: 5.6vw;
      color: #000000ff;
      font-size: 4vw;
      margin-top: 2.6667vw;
      margin-left: 2.6667vw;
    }
    .right {
      width: 7.4667vw;
      height: 4.5333vw;
      line-height: 4.5333vw;
      color: #000000ff;
      font-size: 3.7333vw;
      margin-top: 3.2vw;
      margin-left: 68.5867vw;
    }
  }
  // 计算价格
  .compute {
    width: 94.6667vw;
    height: 18.6667vw;
    border-radius: 1.3333vw;
    margin: 0 auto;
    margin-top: 2.6667vw;
    background: #ffffffff;
    .top{
      display: flex;
      width: 89.3333vw;
      height: 5.3333vw;
      margin: 0 auto;
      padding-top: 3.2vw;
      .one{
        width: 19.2vw;
        height: 4.5333vw;
        line-height: 4.5333vw;
        color: #000000ff;
        font-size: 3.7333vw;
      }
      .two{
        display: flex;
        width: 16vw;
        height: 4.2667vw;
        line-height: 4.2667vw;
        color: #000000ff;
        font-size: 3.7333vw;
        margin-left: 25.4667vw;
      }
    }
    // 商品总价
    .bottom{
      display: flex;
      .three{
        width: 16vw;
        height: 4.2667vw;
        line-height: 4.2667vw;
        font-size: 3.7333vw;
        margin-left: 2.6667vw;
        margin-top: 3.4667vw;
      }
      .four{
        width: 16.0293vw;
        height: 4.2667vw;
        line-height: 4.2667vw;
        color: #000000ff;
        font-size: 3.7333vw;
        margin-left: 28.5333vw;
        margin-top: 3.7333vw;
      }
      .five{
        width: 16.2453vw;
        height: 4.2667vw;
        line-height: 4.2667vw;
        color: #ff2222ff;
        font-size: 3.7333vw;
        font-weight: bold;
        margin-top: 3.7333vw;
      }
    }
  }
  // 提交订单
  .last{
    display: flex;
    .left{
      width: 60vw;
      height: 13.3333vw;
      display: flex;
      background-color: white;
      .ch{
        width: 16.0293vw;
        height: 4.2667vw;
        line-height: 4.2667vw;
        color: #884e22ff;
        font-size: 3.7333vw;
        margin-left: 16.5333vw;
        margin-top: 4.5333vw;
      }
      .num{
        width: 11.4693vw;
        height: 4.2667vw;
        line-height: 4.2667vw;
        color: #884e22ff;
        font-size: 3.7333vw;
        font-weight: bold;
        margin-top: 4vw;
      }
    }
    .right{
      width: 40vw;
      height: 13.3333vw;
      background: #884e22ff;
      font-size: 3.7333vw;
      color: white;
      text-align: center;
      line-height: 13.3333vw;
    }
  }
}
